<template>
  <div>
     <div style="display: flex; justify-content: flex-end; margin: 10px">
      <a-button type="primary" @click="back(null)">返回上一级</a-button>
    </div>
    <div ref="editor" ></div>
    <div style="display: flex;
      justify-content: center;
      align-items: center; margin-top: 20px" ><a-button  @click="save()" type="primary">
            保存
      </a-button></div>
  </div>
</template>
<script>
import E from 'wangeditor-antd'
import api from "@/api/api.js";
import UploadImg from "../../components/uploadImg.vue";
import { quillEditor } from "vue-quill-editor";
import { quillRedefine } from "vue-quill-editor-upload";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";


export default {
  name: 'editor',
  props:['get-full-text','content'], //回调方法
  components: {
    UploadImg,
  },
  mounted(){
      var editor = new E(this.$refs.editor);
      editor.customConfig.customUploadImg = function (files, insert) {
          var formData = new FormData();
      　　　formData.append("files",files[0]); 
            api.tinymcePic(formData).then(res =>{
              if(res.code = 200){
                  var url = res.result[0]
                  insert(url)
              }
            })
      }
      this.editor = editor;
      editor.create();
  },
  data() {
    
    return {
      id:'',
    };
  },
  methods: {
    back(){
      this.$router.push("railways")
    },
    getPlan() {
      api.getRailway({
        railwayId:this.id
      }).then((res) => {
        console.log(res);
        if (res.code == 200) {
            this.editor.txt.html(res.result.content)
        }
      });
    },
   save(){
     api.saveRailway({
        railwayId:this.id,
        content:this.editor.txt.html()
      }).then((res) => {
        if (res.code == 200) {
          this.$message.success("更新成功");
            this.getPlan();
        }
      });
   }
  },
  created() {
    this.id=this.$route.query.id;
    this.getPlan();
  },
};
</script>

<style lang="scss" scoped="" type="text/css">
.editable-row-operations a {
  margin-right: 8px;
}
.top-btn {
  padding: 10px;
}
.code-img {
  display: block;
  width: 150px;
}
</style>
